<template>
    <div>
        <div>
        <el-input
                v-model="input1"
                class="w-50 m-2"
                size="large"
                placeholder="Please Input"
        />
            <el-form :inline="true" :model="formModel" class="demo-form-inline">
                <el-form-item label="接受">
                    <el-input v-model="formModel.connct"  clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="connectWebSocket">建立连接</el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="formModel" class="demo-form-inline">
                <el-form-item label="消息">
                    <el-input v-model="formModel.sendmessage"  clearable />
                </el-form-item>
                <el-form-item>
                    <!-- 定义一个用于处理点击事件的方法 -->
                    <el-button type="primary" @click="sendMessage">发送消息</el-button>
                </el-form-item>
            </el-form>
            <el-form :inline="true" :model="formModel" class="demo-form-inline">
                <el-form-item label="接受">
                    <el-input v-model="formModel.massage"  clearable />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="desendMessage">接受消息</el-button>
                    <el-form-item>
                        <el-button type="primary" @click="router">跳转</el-button>
                    </el-form-item>
                </el-form-item>
            </el-form>
        </div>
        <div class="flex">
            <el-button color="#626aef" :dark="isDark" @click="disconnectWebSocket">断开连接</el-button>
        </div>
    </div>
</template>

<script>
    import {useRouter} from 'vue-router'
    export default {
        data() {
            return {
                formModel:{
                    massage: '',
                    sendmessage: '',
                    connct: '',
                },
                input1: '',
                localRouter: useRouter()
            };
        },
        methods: {
            connectWebSocket() {
                this.$websocket.connect(this.formModel.connct);

                // 在WebSocket连接建立后，添加消息监听器
                this.$websocket.addMessageListener((message) => {
                    console.log("接受到消息:", message);
                    this.formModel.massage = message;
                    this.input1 = message;
                    // 其他处理逻辑
                });

                this.input1 = "连接建立成功";
            },
            sendMessage() {
                this.$websocket.sendMessage(this.formModel.sendmessage);
                console.log("发送的消息为" + this.formModel.sendmessage);
                this.input1 = this.formModel.sendmessage;
            },
            disconnectWebSocket() {
                this.$websocket.disconnect();
                this.input1 = "连接关闭成功";
            },
            desendMessage() {
                // 定义 desendMessage 方法，你可以在这里发送消息到后端
                this.$websocket.onmessage = (event) => {
                    const message = event.data;
                    console.log("11111:", message);
                };
            },
            router(){
                this.localRouter.push({path:'/banner'})
                    .then(() => {
                        // 在路由导航完成后执行其他操作
                    });
            }
        },
        mounted() {
            // 添加以下代码以检查WebSocket连接状态
            if (this.$websocket.socket) {
                console.log("WebSocket连接已建立");
            } else {
                console.log("WebSocket连接未建立");
            }
        }
    };

</script>
<style>
    .flex{
        padding-left: 263px;
    }
</style>